<template>
	<view class="root">
		<scroll-view scroll-y class="scroll-view">
			<view class="content">
				<view class="card padding">
					<view class="flexr align-center">
						<image class="icon" src="../../static/addr.png"></image>
						<text class="card-name">光博士眼镜（大仟里店）</text>
					</view>
					<view class="shop-addr">
						地址:  广东省 深圳市 宝安区 西乡街道华侨新村二巷10号1205房
					</view>
				</view>
				
				<view class="card">
					<view class="card-title">
						<view class="card-name">到店时间</view>
					</view>
					<view class="card-content">
						<view class="item-title">选择日期和时间<text class="required">*</text></view>
						<view class="field flexr align-center" @click="showDatePicker">
							<view class="field-text">2022-06-30</view>
							<image class="field-icon" src="@/static/ic_date.png"></image>
						</view>
						<view class="times">
							<view class="flexr">
								<view class="time active">09:00-10:00</view>
								<view class="time">10:00-11:00</view>
								<view class="time">14:00-16:00</view>
							</view>
							<view class="flexr">
								<view class="time">20:00-21:00</view>
								<view class="time">21:00-22:00</view>
								<view class="time hide"></view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="card">
					<view class="card-title">
						<view class="card-name">上传描述与凭证</view>
					</view>
					<view class="card-content">
						<view class="item-title">问题描述（10/500）<text class="required">*</text></view>
						<textarea class="proj-desc" placeholder="请输入问题描述">
						</textarea>
						<view class="item-title">上传凭证（最多8张图）</view>
						<view class="photos flexr flex-wrap">
							<view class="photo" v-for="(item,index) in 7" :key="index">
								<image class="image" src="@/subpages/static/shop_removed.png"></image>
								<image class="delete" src="@/static/delete.png"></image>
							</view>
							<view class="photo upload flexc align-center justify-center">
								<image class="camera" src="@/static/camera.png" mode="widthFix"></image>
								<text>上传凭证</text>
							</view>
						</view>
					</view>
				</view>
				
				<view class="primary-button">
					提交预约
				</view>
				
			</view>
		</scroll-view>
		
		<uni-popup ref="datePickerRef"
			@change="({show}) => datePickerShow = show"
			type="bottom" background-color="#fff"
			border-radius="30rpx" :mask-click="false">
			<!-- <myDatePicker></myDatePicker> -->
			<myDatePicker
				:show="datePickerShow"
				@onCancel="onCancelDatePicker"
				@onConfirm="onConfirmDatePicker"
			></myDatePicker>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import myDatePicker from '@/subpages/widgets/myDatePicker.vue';
const datePickerShow = ref(false)
const datePickerRef = ref(null)

function showDatePicker() {
	datePickerRef.value?.open('bottom')
}
function onCancelDatePicker() {
	datePickerRef.value?.close()
}
function onConfirmDatePicker() {
	datePickerRef.value?.close()
}
</script>

<style lang="scss">
.root {
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.scroll-view {
	flex: 1;
	overflow-y: scroll;
}
.content {
	padding: 32rpx;
	.card {
		background-color: white;
		border-radius: 20rpx;
		// padding: 30rpx;
		&.padding {
			padding: 30rpx;
		}
		.icon {
			height: 48rpx;
			width: 48rpx;
			margin-right: 15rpx;
		}
		.card-name {
			color: $text-color1;
			font-size: 32rpx;
		}
		.shop-addr {
			margin-top: 20rpx;
			color: $text-color5;
		}
		.card-title {
			height: 90rpx;
			padding: 0 30rpx;
			border-bottom: 1px solid $divider-color;
			display: flex;
			align-items: center;
		}
		.card-content {
			padding: 32rpx;
			.item-title {
				color: $text-color2;
				margin-bottom: 15rpx;
			}
			.required {
				color: red;
				margin-left: 10rpx;
			}
		}
		.field {
			border: 1px solid #E5E5E5FF;
			border-radius: 13rpx;
			height: 80rpx;
			padding: 0 30rpx;
			.field-text {
				font-size: 32rpx;
				color: $text-color1;
				flex: 1;
			}
			.field-icon {
				width: 36rpx;
				height: 36rpx;
			}
			.proj-icon {
				width: 30rpx;
			}
		}
		.field + .item-title {
			margin-top: 15rpx;
		}
		.proj-desc {
			border: 1px solid #E5E5E5FF;
			border-radius: 13rpx;
			padding: 24rpx 30rpx;
			font-size: 32rpx;
			background-color: white;
			min-height: 240rpx;
			margin-bottom: 20rpx;
			width: auto;
		}
		.times {
			.time {
				flex: 1;
				border: 1px solid #E5E5E5FF;
				border-radius: 13rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 80rpx;
				margin-top: 15rpx;
				overflow: hidden;
				color: $text-color1;
				&.hide {
					border: none;
				}
				&.active {
					background-color: #34B5A019;
					color: $primary-color;
				}
			}
			.time + .time {
				margin-left: 15rpx;
			}
		}
		.photos {
			margin-right: -15rpx;
			margin-bottom: -15rpx;
			.photo {
				width: 144rpx;
				height: 144rpx;
				border-radius: 10rpx;
				overflow: hidden;
				min-height: 144rpx;
				min-width: 144rpx;
				position: relative;
				margin-right: 15rpx;
				margin-bottom: 15rpx;
				font-size: 20rpx;
				color: $text-color2;
				box-sizing: border-box;
				.image {
					width: 100%;
					height: 100%;
				}
				.delete {
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					width: 40rpx;
					height: 40rpx;
				}
				.camera {
					width: 52rpx;
					// height: 52rpx;
					margin-bottom: 20rpx;
				}
			}
			.upload {
				border: 2rpx solid #E5E5E5;
				// border: 10rpx;
				box-sizing: border-box;
			}
		}
	}
	.card + .card {
		margin-top: 32rpx;
	}
	.primary-button {
		margin-top: 48rpx;
		margin-bottom: 26rpx;
	}
}
</style>
